<template>
	<view :class="[shoplist.length==0&&off_shelf.length==0?'':'backCor']">
		<view class="Tips" v-if="shoplist.length==0&&off_shelf.length==0" :style='{height:height+"rpx"}'>
			<Empty mode="shop" marked="购物车还是空空的"></Empty>
			<Btn marked="去逛逛" backgroundColor="#FD1470" :width="400" :height="80" :borderRadius="60" :marginTop="10" @click.native="Jump"></Btn>
		</view>
		<view class="all-choose" v-if="shoplist.length!==0">
			<checkbox-group @change="allChoose">
				<label class="radio">
					<checkbox value="all" :checked="checked" :disabled="radiochec"/><text>全选</text>
				</label>
			</checkbox-group>
			<text class="oper-button" v-if="checked==false">
				编辑
			</text>
			<text class="oper-button" v-else @click="Clear">
				删除
			</text>
		</view>
		<view  class="shop-list" :class="[off_shelf.length==0?'paddbot':'']" v-if="shoplist.length!==0">
			<view class="title">
				<view class="" style="font-size: 32rpx; font-weight: bolder; color: #29AE78;">
					预计24H发货
				</view>
				<view class="" style="margin-left: 10rpx; font-size: 24rpx; color: #9A9EA9;">
					产地直达
				</view>
			</view>
			<checkbox-group  @change="checkGroupChange">
				<block v-for="(item,index) in shoplist" :key="index">
					<tui-swipe-action :actions="actions" @click="Getaction(item)">
							<template v-slot:content>
								<ShopCarItem mode="yanhua" :box="true" :yanhua="false" :Data="item" :checked="item.checked">
									<view class="operation">
										<view class="add" @click="control==true?reduce(item):''">
											-
										</view>
										<view class="num">
											{{item.cart_num}}
										</view>
										<view class="reduce" @click="control==true?add(item):''">
											+
										</view>
									</view>
								</ShopCarItem>
								<SplitLine backgroundColor="#eeeeee" :width="90" :height="2"></SplitLine>
							</template>
					</tui-swipe-action>
				</block>
			</checkbox-group>
		</view>
		<view class="off-shelf-list" v-if="off_shelf.length!==0">
			<view class="title">
				<view class="" style="font-size: 30rpx; font-weight: bolder; ">
					共失效商品{{off_shelf.length}}件
				</view>
				<view class="" style="ont-size: 28rpx; color: #9A9EA9;" @click="shelfClear">
					清空
				</view>
			</view>
			<block v-for="(item,index) in off_shelf" :key="index">
				<tui-swipe-action :actions="actions" @click="Getaction(item)">
					<template v-slot:content>
						<ShopCarItem mode="yanhua" :box="false" :yanhua="false" :Data="item" :checked="item.checked">
						</ShopCarItem>
						<SplitLine backgroundColor="#eeeeee" :width="90" :height="2"></SplitLine>
					</template>
				</tui-swipe-action>
			</block>
		</view>
		<view class="bottom" v-if="shoplist.length!==0">
			<view class="total-box">
				合计<view class="price">
					￥{{total_price}}
				</view>
			</view>
			<Btn marked="去结算" :backgroundColor="button_color" :fontColor="fontColor" :width="240" :height="70" :borderRadius="34" @click.native="goPayment"></Btn>
		</view>
	</view>
</template>

<script>
	import Empty from "../../../components/bw-Empty/bw-Empty.vue";
	import Btn from "../../../components/bw-Btn/bw-btn.vue"
	import SplitLine from "../../../components/bw-Split-line/bw-Split-line.vue"
	import tuiSwipeAction from "../../../components/bw-swipe-action/bw-swipe-action.vue"
	import ShopCarItem from "../../shop/components/bw-shopCar-Item.vue";
	import {cartList,cartChange,cartDelete,cartClear} from "../../../api/shop.js"
 	export default {
		components:{
			Empty,
			Btn,
			SplitLine,
			tuiSwipeAction,
			ShopCarItem
		}, 
		data() {
			return {
				shop:false,
				height :0,
				checked:false,
				JumpUrl:"/pages/Mine/Hometwoclassify/Hometwoclassify",
				checkedarr:[],
				values:"",
				button_color:"#F7F8F9",
				actions: [{
					name: '删除',
					color: '#fff',
					fontsize: 30, //单位rpx
					width: 70, //单位px
					background: '#FD3B31'
				}],
				shoplist:[
					
				],
				off_shelf:[],
				off_shelf_ids:[],
				total_price:0,
				control:true,//防止多次点击
				cart_ids:[],
				radiochec:true,
				fontColor:"#C9CCD5",
			}
		},
		onShow() {
			//获取屏幕高度
			this.getHight()
			cartList().then(res=>{
				this.off_shelf=[]
				res.data.cart_list.forEach(item=>{
					if(item.goods_info.status==0){
						this.off_shelf.push(item)
						console.log(res.data.cart_list.indexOf(item))
						res.data.cart_list.splice(res.data.cart_list.indexOf(item),1)
					}
					else{
						item["checked"]=false
					}
				})
				this.shoplist=res.data.cart_list
				console.log(this.shoplist)
				console.log(this.off_shelf)
				this.total_price=0
				//判断购物车数据是否为空 全选按钮是否可用
				if(res.data.cart_list.length==0){
					this.radiochec=true
				}
				else{
					this.radiochec=false
				}
				this.checked=false
			})
		},
		methods: {
			//加
			async add(item){
				//防止多次点击
				this.control=false
				item.cart_num++
				await cartChange({
					goods_id:item.goods_info.id,
					op_type:0,
					cart_num:1
				}).then(res=>{
					cartList().then(res=>{
						//更新购物车数据  保持前边选中状态
						this.off_shelf=[]
						for(let i=0;i<res.data.cart_list.length;i++){
							if(res.data.cart_list[i].goods_info.status==0){
								this.off_shelf.push(res.data.cart_list[i])
								res.data.cart_list.splice(res.data.cart_list.indexOf(res.data.cart_list[i]),1)
							}
							else{
								for(let t=0;t<this.cart_ids.length;t++){
									if(this.cart_ids[t]==res.data.cart_list[i].id){
										res.data.cart_list[i].checked=true
										break;
									}else{
										res.data.cart_list[i].checked=false
									}
								}
							}
						}
						this.shoplist=res.data.cart_list
						this.control=true
					})
				})
				//判断是否为选中 计算总价
				if(item.checked==true){
					this.total_price=this.total_price+Number(item.sale_price)
				}
			},
			//减
			async reduce(item){
				//防止多次点击
				this.control=false
				if(item.cart_num>0){
					item.cart_num--
					await cartChange({
						goods_id:item.goods_info.id,
						op_type:1,
						cart_num:1
					}).then(res=>{
						cartList().then(res=>{
							
							this.shoplist=res.data.cart_list
							//判断是否为空
							if(this.shoplist.length==0){
								this.checked=false
							}
							this.control=true
						})
						//判断是否为选中   计算总价
						if(item.checked==true){
							this.total_price=this.total_price-Number(item.sale_price)
						}
					})
					
				}else{
					return
				}
			},
			//获取屏幕高度
			getHight() {
				let that = this
				uni.getSystemInfo({
					success: function(res) {
						that.height = res.screenHeight*2-356
					}
				})
			},
			Jump(){
				uni.navigateTo({
					url:this.JumpUrl
				})
			},
			//全选
			allChoose(e){
				if(e.detail.value.length!==0){
					this.button_color="#FF78AE"
					this.fontColor="#FFFFFF"
				}
				else{
					this.button_color="#F7F8F9"
					this.fontColor="#C9CCD5"
				}
				if (this.checked == false){
					this.checked = true
					for (let item of this.shoplist){
						item.checked=true
						this.cart_ids.push(item.id)
						this.total_price+=Number(item.total_price) 
					}
					console.log(this.cart_ids)
				}else{
					for (let item of this.shoplist){
						item.checked=false
						this.total_price-=Number(item.total_price)
					}
					this.cart_ids=[]
					this.checked = false
				}
				
			},
			goPayment(){
				if(this.cart_ids.length==0){
					uni.showToast({
						title:"请选择要购买商品",
						icon:"none"
					})
				}
				else{
					uni.navigateTo({
						url:"../../orderPay/payment2?ids="+this.cart_ids.join()
					})
					//选中商品后跳转 将选中商品Id清空
					this.cart_ids=[]
				}
				
			},
			//删除
			Getaction(item){
				console.log(item)
				console.log(this.cart_ids)
				console.log(this.cart_ids.indexOf(item.id))
				this.cart_ids.splice(this.cart_ids.indexOf(item.id),1)
				console.log(this.cart_ids)
				if(this.cart_ids.length!==0){
					this.button_color="#FF78AE"
					this.fontColor="#FFFFFF"
				}
				else{
					this.button_color="#F7F8F9"
					this.fontColor="#C9CCD5"
				}
				cartDelete({
					id:item.id
				}).then(res=>{
					cartList().then(res=>{
						this.off_shelf=[]
						for(let i=0;i<res.data.cart_list.length;i++){
							if(res.data.cart_list[i].goods_info.status==0){
								this.off_shelf.push(res.data.cart_list[i])
								res.data.cart_list.splice(res.data.cart_list.indexOf(res.data.cart_list[i]),1)
							}
							else{
								for(let t=0;t<this.cart_ids.length;t++){
									if(this.cart_ids[t]==res.data.cart_list[i].id){
										res.data.cart_list[i].checked=true
										break;
									}else{
										res.data.cart_list[i].checked=false
									}
								}
							}
						}
						this.shoplist=res.data.cart_list
						//判断是否为空
						if(this.shoplist.length==0){
							this.checked=false
						}
						this.control=true
					})
				})
				//判断是否为选中   计算总价
				if(item.checked==true){
					this.total_price=this.total_price-Number(item.sale_price)
				}
			},
			//清空购物车
			async Clear(){
				await cartClear().then(res=>{
					cartList().then(res=>{
						
						this.shoplist=res.data.cart_list
						//判断是否为空
						if(this.shoplist.length==0){
							this.checked=false
							this.button_color="#F7F8F9"
							this.fontColor="#C9CCD5"
						}
						this.control=true
						//判断是否为选中   计算总价
						this.total_price=0
					})
				})
				
			},
			//清空失效商品
			shelfClear(){
				this.off_shelf.forEach(item=>{
					this.off_shelf_ids.push(item.id)
				})
				cartDelete({
					id:this.off_shelf_ids.toString()
				}).then(res=>{
					console.log(res)
					this.off_shelf=[]
					this.off_shelf_ids=[]
				})
			},
			//复选框
			checkGroupChange(e) {
				// console.log(e)
				// // this.check_value = e.detail.value
				// if(e.detail.value.length==this.shoplist.length){
				// 	this.checked=true
				// }
				//去结算按钮的变换
				if(e.detail.value.length!==0){
					this.button_color="#FF78AE"
					this.fontColor="#FFFFFF"
				}
				else{
					this.button_color="#F7F8F9"
					this.fontColor="#C9CCD5"
				}
				this.cart_ids=e.detail.value
				if(e.detail.value.length==0){
					for (let item of this.shoplist){
						item.checked=false
					}
				}
				console.log(this.cart_ids)
				this.total_price=0
				for(let i=0;i<this.shoplist.length;i++){
					for(let t=0;t<e.detail.value.length;t++){
						if(e.detail.value[t]==this.shoplist[i].id){
							this.shoplist[i].checked=true
							this.total_price+=Number(this.shoplist[i].total_price)
							break;
						}else{
							this.shoplist[i].checked=false
						}
					}
				}
				if (e.detail.value.length>0 && e.detail.value.length==this.shoplist.length){
					this.checked = true
				}else{
					this.checked = false
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
	}
	/deep/ .uni-checkbox-input-checked{
		background-color: #007AFF;
		color: #FFFFFF !important;
		width: 19px;
	}
	/deep/ .uni-checkbox-input{
		width: 38rpx;
		height: 38rpx;
	}
	/deep/ uni-scroll-view {
		width: auto;
	}
	.backCor{
		height: 100%;
		background-color: #EEEEEE;
	}
	.Tips{
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.shop-list{
		background-color: #EEEEEE;
		padding: 160rpx 30rpx 0rpx 30rpx;
	
		.title{
			background-color: #FFFFFF;
			display: flex;
			padding: 40rpx 30rpx;
			align-items: flex-end;
			font-family: PingFangSC-Medium, PingFang SC;
		}
	}
	.paddbot{
		padding-bottom: 140rpx;
	}
	.off-shelf-list{
		background-color: #EEEEEE;
		padding: 40rpx 30rpx 100rpx 30rpx;
		.title{
			display: flex;
			justify-content: space-between;
			padding: 20px;
			font-size: 28rpx;
			background-color: #FFFFFF;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #171E3A;
		}
		/deep/ .tui-swipeout-wrap{
			padding-left: 40rpx;
		}
	}
	.all-choose{
		width: 84%;
		padding: 40rpx 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		position: fixed;
		top: 88rpx;
		left: 0rpx;
		z-index: 999;
		.radio{
			display: flex;
			align-items: center;
			/deep/ .uni-checkbox-input{
				border-radius: 60rpx;
			}
			
		}
		.oper-button{
			width: 80rpx;
		}
	}
	.bottom{
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		border-top: 1px solid #D1D1D3;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		position: fixed;
		bottom: 0px;
		left: 0px;
		z-index: 999;
		/deep/ uni-radio-group, uni-checkbox-group{
			width: auto;
			width:92%;
			border-radius: 12px;
		}
		.total-box{
			display: flex;
			align-items: center;
			font-size: 32rpx;
			color: #171E3A;
			font-weight: bolder;
			.price{
				font-size: 28rpx;
				margin: 0 20rpx;
				color: #FD1470;
			}
		}
	}
		.operation{
			width: 55%;
			height: 44rpx;
			display: flex;
			justify-content: space-around;
			.add{
				width: 42rpx;
				height: 42rpx;
				text-align: center;
				line-height: 36rpx;
				font-size: 60rpx;
				border: 1px solid #EFF0F2;
				border-radius: 16rpx;
				color: #171E3A;
			}
			.num{
				width: 44rpx;
				height: 44rpx;
				font-size: 28rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #171E3A
			}
			.reduce{
				width: 44rpx;
				height: 44rpx;
				text-align: center;
				line-height: 44rpx;
				font-size: 44rpx;
				border: 1px solid #EFF0F2;
				border-radius: 16rpx;
				color: #171E3A;
			}
		}
</style>